<template>
	<view class="warp">
		<view class="notice-view"><u-notice-bar class="notice" type="none" :list="publishList" border-radius="35" mode="vertical" color="#FA8513"></u-notice-bar></view>
		<u-gap height="20" bg-color="#ebebeb"></u-gap>
		<view class="example-body">
			<uni-grid :column="2" :highlight="true">
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
					<view class="grid-item-box" @tap="openinfo" :data-detail="index + 1">
						<image :src="item.url" class="image" mode="aspectFill" />
						<text class="text">{{ item.text }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		
	</view>
</template>

<script>
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
export default {
	components: {
		uniGrid,
		uniGridItem
	},
	
	data() {
		return {
			list: [
				{
					url: '/static/sellHouse.png',
					text: '我要卖房',
					badge: '10',
					type: 'primary'
				},
				{
					url: '/static/buyHouse.png',
					text: '我要买房',
					badge: '1',
					type: 'success'
				},
				{
					url: '/static/chuzu.png',
					text: '我要出租',
					badge: '99',
					type: 'warning'
				},
				{
					url: '/static/zufang.png',
					text: '我要租房',
					badge: '2',
					type: 'error'
				}
			],
			publishList: []
		};
	},
	onLoad() {
		uni.request({
			url: 'http://www.mksoft.cn/zx/front/zhuangxiu/list20Fangyuan', //接口地址
			success: res => {
				if (res.data.code == 200) {
					 this.publishList = res.data.data;
				}
			},
			fail: res => {
				console.log('未查询到数据', res);
			}
		});
	},
	methods: {
		openinfo(e) {
			let index = e.currentTarget.dataset.detail;
			uni.navigateTo({
				url: `/pages/hpublish/hpublish?index=${index}`
			});
		}
	}
};
</script>

<style>
page {
	background-color: #ffffff;
}

/* #ifndef APP-NVUE */
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 100%;
	height: auto;
}

view {
	font-size: 14px;
	line-height: inherit;
	background-color: #ffffff
}

.example-body {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	font-size: 14px;
	background-color: #ffffff;
}

/* #endif */
.notice-view{
	padding:15px;
}
.notice{
	box-shadow: 2px 2px 2px #d3d3d3;
	border:1px solid #f5f5f5
}
.example-body {
	flex-direction: column;
	padding: 15px;
}

.image {
	width: 120rpx;
	height: 120rpx;
}

.text {
	font-size: 26rpx;
	margin-top: 10rpx;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
}

.grid-item-box {
	flex: 1;
	/* position: relative;
 */
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}
</style>
